<template>
  <div class="container" >
    <div class="card-model card-model-title">
      <el-card shadow="never" body-style="{padding: 0;}"> 
        <el-row>
          <el-col :span="5">
            <div class="card-left">
              <p>
                已关闭
              </p>
              <div class="card-left-btn">
                <el-button type="success" size="small">订单关闭</el-button>
              </div>
            </div>
          </el-col>
          
          <el-col :span="19">
            <div class="card-right">
              <el-steps :active="1" align-center>
                <el-step icon="el-icon-circle-check" title="待支付" description="这是一段很长很长很长"></el-step>
                <el-step icon="el-icon-circle-check" title="待完成" description="这是一段很长很长很长"></el-step>
                <el-step icon="el-icon-circle-check" title="已完成" description="这段就没那么长了"></el-step>
                <el-step icon="el-icon-circle-check" title="已结算" description="这段就没那么长了"></el-step>
              </el-steps>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="card-model">
      <el-card shadow="never" body-style="{padding: 10px;}">
        <div class="card-group">
          <p class="title">订单信息</p>          
          <el-row :gutter="24">
            <el-col :span="6">
              <div class="card-item">
                <span>订单号:</span>
                1231231
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单来源:</span>
                微信H5
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>创建时间:</span>
                2020-2-9 12:30:30
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单金额:</span>
                99..00
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人昵称: </span>
                
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人id:</span>
                1213213
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人身份:</span>
                游客
              </div>
            </el-col>
          </el-row>
        </div> 
        <div class="card-group">
          <p class="title">订单信息</p>          
          <el-row :gutter="24">
            <el-col :span="6">
              <div class="card-item">
                <span>订单号:</span>
                1231231
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单来源:</span>
                微信H5
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>创建时间:</span>
                2020-2-9 12:30:30
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单金额:</span>
                99..00
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人昵称: </span>
                
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人id:</span>
                1213213
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人身份:</span>
                游客
              </div>
            </el-col>
          </el-row>
        </div> 
      </el-card>
    </div>
    <div class="card-model" body-style="{padding: 10px;}">
      <el-card shadow="never">
        <div class="card-group">
          <p class="title">订单信息</p>          
          <el-row :gutter="24">
            <el-col :span="6">
              <div class="card-item">
                <span>订单号:</span>
                1231231
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单来源:</span>
                微信H5
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>创建时间:</span>
                2020-2-9 12:30:30
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单金额:</span>
                99..00
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人昵称: </span>
                
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人id:</span>
                1213213
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人身份:</span>
                游客
              </div>
            </el-col>
          </el-row>
        </div> 
        <div class="card-group">
          <p class="title">订单信息</p>          
          <el-row :gutter="24">
            <el-col :span="6">
              <div class="card-item">
                <span>订单号:</span>
                1231231
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单来源:</span>
                微信H5
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>创建时间:</span>
                2020-2-9 12:30:30
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>订单金额:</span>
                99..00
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人昵称: </span>
                
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人id:</span>
                1213213
              </div>
            </el-col>
            <el-col :span="6">
              <div class="card-item">
                <span>下单人身份:</span>
                游客
              </div>
            </el-col>
          </el-row>
        </div> 
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {

    }
  }

</script>

<style scoped lang="scss">
.card-model>>>.el-card__body {
  padding: 10px;
}
.card-model.card-model-title>>>.el-card__body {
  padding: 0;
}
.card-model{
  margin:0 0 10px 0;
}
.title{
  padding: 0 0 10px 0;
  margin:0;
  font-size: 14px;
  font-weight: 600;
}
.card-item{
  padding: 0 0 5px 0;
  font-size: 12px;
}
.card-item span{
  font-size: 12px;
}
.card-group{
  padding: 0 0 10px 0;
}
.card-left{
  width: 100%;
  height: 100%;
  border-right: 1px solid #EBEEF5;
}
.card-left p{
  padding: 0;
  margin: 0;
  font-weight: 600;
}
.card-left{
  padding: 10px;
  height: 100px;
  position: relative;
}
.card-right{
  padding: 10px;
}
.card-left-btn{
  position: absolute;
  bottom: 10px;
  left:10px;
}
</style>
